const form = document.querySelector('.input-area form');
const inputText = document.querySelector('.input-area .input-text');
const currentChat = document.getElementById('current-chat');
const historyChat = document.getElementById('history-chat');
const tabButtons = document.querySelectorAll('.tab-button');
const chatWindows = document.querySelectorAll('.chat-window');
const inputArea = document.querySelector('.input-area');

//用户输入最新的消息
let question;
//用户最新的消息泡
let userMessageDiv;
//百度AI最新的消息泡
let aiMessageDiv;

form.addEventListener('submit', submitForm);

async function submitForm(e) {
  e.preventDefault();
  question = inputText.value;
  if (question === "") return;
  inputText.value = '';
  userMessageDiv = document.createElement('div');
  userMessageDiv.classList.add('message', 'user');
  userMessageDiv.innerHTML = `<p>用户: ${question}</p>`;
  currentChat.appendChild(userMessageDiv);

  const response = await fetch('https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/yi_34b_chat?access_token={24.1fca670dc45b45d9b32908fc6b6d24d0.2592000.1719902951.282335-75708900}', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      "messages": [
        {
          "role": "user",
          "content": question
        }
      ]
    })
  });

  if (response.ok) {
    const answer = await response.json();
    const resultText = answer.result;
    aiMessageDiv = document.createElement('div');
    aiMessageDiv.classList.add('message', 'ai');
    aiMessageDiv.innerHTML = `<p>百度 AI: ${resultText}</p>`;
    currentChat.appendChild(aiMessageDiv);
    localStorage.setItem("history-chat", currentChat.innerHTML);
    historyChat.innerHTML = localStorage.getItem("history-chat")
  }

}

document.addEventListener('DOMContentLoaded', function () {
  tabButtons.forEach(button => {
    button.addEventListener('click', function () {
      // 移除所有tab按钮的active类
      tabButtons.forEach(btn => btn.classList.remove('active'));
      // 添加active类到被点击的tab按钮上
      this.classList.add('active');

      // 获取data-target属性值
      const target = this.getAttribute('data-target');

      // 隐藏所有的chat-window盒子
      chatWindows.forEach(chatWindow => chatWindow.classList.remove('active'));

      // 显示对应的chat-window盒子
      const targetChatWindow = document.getElementById(target);
      if (targetChatWindow) {
        targetChatWindow.classList.add('active');
        console.log(targetChatWindow);
      }

      // 根据目标chat-window切换input-area的显示状态
      if (target === 'history-chat') {
        inputArea.classList.add('hidden'); // 隐藏input-area但保留空间
        // 从localStorage加载历史对话数据
        const historyData = localStorage.getItem("history-chat");
        if (historyData) {
          // 清除history-chat盒子中现有的内容
          historyChat.innerHTML = '';
          // 将数据设置到history-chat盒子中
          historyChat.innerHTML = historyData;
        }
      } else {
        inputArea.classList.remove('hidden'); // 显示input-area
      }
    });
  });

  // 如果有默认激活的tab按钮，则触发其点击事件
  const activeTabButton = document.querySelector('.tab-button.active');
  if (activeTabButton) {
    activeTabButton.click();
  }
});